import React, { Component } from 'react'
import { NavBar, Icon ,SearchBar} from 'antd-mobile';
import myaxios from '../../utils/myaxios'
import {withRouter} from 'react-router-dom'
import './searchContent.scss'
 class searchContent extends Component {

  state = {
    productList:[],
    inpVal:''
  }
  //请求数据搜索
  getProductList = ()=>{
    console.log("请求数据")
    myaxios.get('goods/qsearch',{
      params:{
        query:this.state.inpVal
      }
    }).then((res)=>{
      this.setState({
        productList:res
      })
    }).catch(err=>{console.log(err)})
  }
  //搜索商品
  goProduct = (e) => {
    let pid = e.target.getAttribute("data-id")
    this.props.history.push("/shopDetail/"+pid)
  }
  

  render() {
    return (
      <div className='yg-search-center'>
        {/* 顶部nav开始 */}
        <div className='search-center-navBar'>
          <NavBar className='center-navBar'
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
            >搜索中心</NavBar>
        </div>
            {/* 顶部nav结束 */}
        {/* 输入框开始 */}
        <SearchBar className='yg-search-input'
        placeholder="Search"
        value={this.state.inpVal}
        cancelText="搜索"
        // onSubmit={value => console.log(value, 'onSubmit')}
        // onClear={value => console.log(value, 'onClear')}
        // onFocus={() => console.log('onFocus')}
        // onBlur={() => console.log('onBlur')}
        onCancel={() => this.getProductList()}
        showCancelButton
        onChange={(value)=>{
          this.setState({
            inpVal:value
          })
        }}
      />
        {/* 输入框结束 */}
        {/* 产品开始 */}
        <div className='yg-search-list' onClick={this.goProduct}>
          {
            this.state.productList.map((v,i)=>{
              return <div  data-id={v.goods_id} key={v.goods_id} className='yg-search-product'>
                  {v.goods_name}
              </div>
            })
          }
        </div>
        {/* 产品结束 */}
      </div>
    )
  }
}
export default withRouter(searchContent)